---
title: AssistantModal
---

import { Steps, Step } from "fumadocs-ui/components/steps";
import { InstallCommand } from "@/components/docs/install-command";
import { AssistantModalSample } from "@/components/samples/assistant-modal-sample";

## Overview

A chat bubble shown in the bottom right corner of the screen. Useful for support or Q&A use cases.

<AssistantModalSample />


## Getting Started

<Steps>
  <Step>

### Add `assistant-modal`

<InstallCommand shadcn={["assistant-modal"]} />

This adds `/components/assistant-ui/assistant-modal.tsx` to your project, which you can adjust as needed.

  </Step>
  <Step>

### Use in your application

```tsx title="/app/page.tsx" {1,6}
import { AssistantModal } from "@/components/assistant-ui/assistant-modal";

export default function Home() {
  return (
    <div className="h-full">
      <AssistantModal />
    </div>
  );
}
```

  </Step>
</Steps>
